<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>物资管理</el-breadcrumb-item>
        <el-breadcrumb-item>物资分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:10px">
      <el-button 
      type="warning" 
      icon="el-icon-circle-plus-outline" 
      style="width:100px;height:50px;font-size:18px;margin-left:10px"
      @click="handleAdd"
      >添加</el-button>
      <!-- 表格 -->
      <el-table border :data="categoryList" 
      ref="multipleTable" 
      style="width:1800px;margin:20px 0px 0px 10px"
      row-key="id"
      stripe
      :tree-props="{children: 'children'}">
      >
      <el-table-column
          label="#"
        type="index"
        width="50">
      </el-table-column>
        <el-table-column label="分类名称" width="200">
          <template slot-scope="scope">
                {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="排序"  width="150">
          <template slot-scope="scope">
          {{scope.row.sort}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间"  width="300">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="300">
          <template slot-scope="scope">
            {{ scope.row.modifiedTime}}
          </template>
        </el-table-column>
        <el-table-column label="备注"  width="300">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="层级"  width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level===1">一级分类</el-tag>
            <el-tag type="success" v-if="scope.row.level===2">二级分类</el-tag>
            <el-tag type="danger" v-if="scope.row.level===3">三级分类</el-tag>
          </template>
        </el-table-column>
        
    
      
        <el-table-column label="操作"  >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button size="mini" type="danger" @click="delete(scope.row.id)" icon="el-icon-delete"></el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagination-container" style="margin-right:60px">
          <el-pagination
                  layout="total,sizes,prev, pager, next,jumper"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="pageNum"
                  :page-sizes="[5,10,15]"
                  @current-change="handlePageChange"
                  @size-change="handleSizeChange"
          >
          </el-pagination>
      </div>
        <el-dialog
          title="添加分类"
            :visible="isShow"
            width="50%"
            :before-close="handleClose">
          <el-form :model="category"  class="form" style="margin-left:100px"   label-position="right">
            <el-form-item label="分类名称" label-width="80px">
              <el-input  type="text" v-model="category.name" style="width:600px" ></el-input>
            </el-form-item>
            <el-form-item label="父分类" label-width="80px">
              <el-cascader
                  v-model="category.pid"
                  :options="options"
                  @change="handleChangecate"></el-cascader>
            </el-form-item>
            <el-form-item label="备注" label-width="80px">
              <el-input  type="textarea" v-model="category.remark" style="width:600px" ></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="80px">
              <el-input-number v-model="category.sort" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSure">确 定</el-button>
        </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>

export default {

  data(){
    return{
    
      categoryList:[],
       pageSize:35,
        pageNum:1,
        total:null,
        isShow:false,
        category:{
          name:'',
          pid:'',
          remark:'',
          sort:""
        }

    }
  },
  created(){
    this.getcategoryList()
  },
   methods:{
      //获取物资分类列表信息
      async getcategoryList(){
          let res =  await this.$http.get("/productCategory/findProductCategoryList?pageSize="+this.pageSize+"&pageNum="+this.pageNum);
          console.log(res)
          if(res.status===200){
           let category = res.data.data.rows
           let father = []
           category.forEach(item => {
             if(item.pid===0){
               father.push(item) 
             }
           });
            father.forEach(item=>{
              item.children = []
              item.level = 1
              category.forEach(i=>{
               if(item.id===i.pid){
                  i.level = 2
                   i.children=[]
                    category.forEach(j=>{ 
                   
                  if(i.id===j.pid){
                       j.level=3
                    i.children.push(j)
                  }
                })
                   item.children.push(i)
                }
              })
            })
           this.categoryList = father
            this.total = father.length
            this.$message.success("获取物资类别列表信息成功")
          }else{
            this.$message.warning("获取物资类别列表信息失败")
          }
      },
            //页码变化
   handlePageChange(val){
       this.pageNum = val
       this.getcategoryList()
     },
     //点击一页显示多少条
     handleSizeChange(val){
      this.pageSize = val
      this.pageNum = 1
      this.getcategoryList()
     },
     //头部添加按钮
     handleAdd(){
       this.isShow = true
     },
     //叉子和取消
     handleClose(){
       this.isShow = false
     },
    //  计数器
    handleChange(val){
     console.log(val)
    }

    },
  filters:{
    status(val){
      if(val===0){
        return "正常"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .model{
        text-align: center;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background-color: #F0F9EB;
    color: #AECC3A;
    border-radius: 5px;
    display: inline-block;
  }
  .status{
    text-align: center;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #4078FF;
    color: #4078FF;
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
  }
 .el-table .el-table__expand-icon {
    .el-icon-arrow-right:before {
      content: '\e791';
     }
   }
</style>

